<template>
  <div>
    <div class="spanSty">
      <span>国家基本公共卫生服务项目3-6岁龄儿童健康检查记录表</span>
    </div>
    <el-form :model="form" label-width="140px" label-position="left" ref="formRef" :rules="formRules">
      <el-0 content-position="left">编号</el-0>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="身份证号" prop="idCardNo">
            <el-input v-model="form.idCardNo"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="随访日期" prop="followDate">
            <el-date-picker
              v-model="form.followDate"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="月龄">
            <el-select v-model="form.monthAge" style="width: 100%">
              <el-option
                v-for="item in monthAge"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>







      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="所在幼儿园">
            <el-input v-model="form.kindergarten"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="健康管理联系人">
            <el-input v-model="form.linkman"></el-input>

          </el-form-item>
        </el-col>
      </el-row>


      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="联系电话">
            <el-input v-model="form.linkmanIphone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="查体机构">
            <el-select v-model="form.organization" style="width: 100%">
              <el-option
                v-for="item in organization"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
          </el-form-item>



          <el-form-item label="其他医疗机构" v-if="[3].includes(form.organization)">
            <el-input v-model="form.organizationConent"></el-input>
          </el-form-item>
        </el-col>
      </el-row>














      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="体重">
            <el-row :gutter="20">
              <el-col :lg="11" :xl="11">
                <el-form-item prop="weight">
                <el-input v-model="form.weight" placeholder="kg"></el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="11" :xl="11">
                <template>
                  <el-form-item prop="weightSe">
                  <el-radio-group v-model="form.weightSe">
                    <el-radio  :label="1">上</el-radio>
                    <el-radio :label="2">中</el-radio>
                    <el-radio :label="3">下</el-radio>
                  </el-radio-group>
                  </el-form-item>

                </template>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="身长">
            <el-row :gutter="20">
              <el-col :lg="11" :xl="11">
                <el-form-item prop="length">
                <el-input v-model="form.length" placeholder="cm"></el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="11" :xl="11">
                <el-form-item prop="lengthSe">
                <el-radio-group v-model="form.lengthSe">
                  <el-radio  :label="1">上</el-radio>
                  <el-radio :label="2">中</el-radio>
                  <el-radio :label="3">下</el-radio>
                </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
      </el-row>








      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="体重/身高">
            <el-row :gutter="20">
              <el-col :lg="11" :xl="11">
                <el-form-item prop="weightLengh">
                <el-input v-model="form.weightLengh" placeholder="kg"></el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="11" :xl="11">
                <el-form-item prop="weightLeSSS">
                <el-radio-group v-model="form.weightLeSSS">
                  <el-radio  :label="1">上</el-radio>
                  <el-radio :label="2">中</el-radio>
                  <el-radio :label="3">下</el-radio>
                </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>

      </el-row>





      <el-divider content-position="left">体格检查</el-divider>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="体格发育评价">
            <el-select v-model="form.Complexion" style="width: 100%">
              <el-option
                v-for="item in Complexion"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
          </el-form-item>

        </el-col>


        <el-col :lg="12" :xl="12">
          <el-form-item label="听力" prop="hearing">
            <el-select v-model="form.hearing" style="width: 100%">
              <el-option
                v-for="item in hearing"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

      </el-row>










      <el-row :gutter="20" style="">

        <el-col :lg="12" :xl="12">
          <el-form-item label="口腔">
          <el-row>
            <el-col :lg="3" :xl="3">出牙数(颗)</el-col>
            <el-col :lg="5" :xl="5">
              <el-input v-model="form.teething"></el-input>
            </el-col>
            <el-col :lg="3" :xl="3" style="margin-left: 30px">龋齿数(颗)</el-col>

            <el-col :lg="5" :xl="5">
              <el-input v-model="form.decayed"></el-input>
            </el-col>
          </el-row>
          </el-form-item>

        </el-col>


        <el-col :lg="12" :xl="12">
          <el-form-item label="胸部">
            <el-select v-model="form.chest" style="width: 100%">
              <el-option
                v-for="item in eye"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="异常(胸部)" v-if="['异常'].includes(form.chest)">
            <el-input v-model="form.chestContent"></el-input>
          </el-form-item>
        </el-col>

      </el-row>
<!--      <el-row :gutter="20">-->
<!--        <el-col :lg="12" :xl="12">-->
<!--          <el-form-item label="异常(口腔)" v-if="[2].includes(form.oralCavity)">-->
<!--            <el-input v-model="form.oralCavityContent"></el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->

<!--      </el-row>-->
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="腹部">
            <el-select v-model="form.abdomen" style="width: 100%">
              <el-option
                v-for="item in eye"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="异常(腹部)" v-if="['异常'].includes(form.abdomen)">
            <el-input v-model="form.abdomenContent"></el-input>
          </el-form-item>

        </el-col>

        <el-col :lg="10" :xl="10">
          <el-form-item label="血红蛋白值*" prop="hemoglobin">
            <el-row>
              <el-col :lg="5" :xl="5">
                <el-input v-model="form.hemoglobin"></el-input></el-col>
            <el-col :lg="6" :xl="6" style="margin-left: 10px">g/L</el-col>
            </el-row>

          </el-form-item>

        </el-col>
      </el-row>
      <el-row :gutter="20">

        <el-col :lg="12" :xl="12">
          <el-form-item label="异常(脐部)" v-if="[4].includes(form.umbilicus)">
            <el-input v-model="form.umbilicusContent"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">

        <el-col :lg="12" :xl="12">
          <el-form-item label="其他">
            <el-input
              v-model="form.rest"
            ></el-input>
          </el-form-item>
        </el-col>

                <el-col :lg="12" :xl="12">
                  <el-form-item label="发育评估">
                    <el-select v-model="form.development" style="width: 100%" multiple>
                      <el-option
                        v-for="item in development"
                        :key="item.id"
                        :label="item.name"
                        :value="item.name"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="两次随访间患病情况">
            <el-select
              v-model="twoFollowArr"
              multiple
              style="width: 100%"
              @change="seChange1"
            >
              <el-option
                v-for="item in twoFollow"
                :key="item.id"
                :label="item.name"
                :value="item.name"
                :disabled="item.isDisabled"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="(肺炎次数)" v-if="showPneumonia">
            <el-input v-model="form.pneumonia"></el-input>
          </el-form-item>

          <el-form-item label="(腹泻次数)" v-if="showDiarrhea">
            <el-input v-model="form.diarrhea"></el-input>
          </el-form-item>

          <el-form-item label="(外伤次数)" v-if="showTrauma">
            <el-input v-model="form.trauma"></el-input>
          </el-form-item>

          <el-form-item label="(其他)" v-if="showOther">
            <el-input v-model="form.twoFollowOther"></el-input>
          </el-form-item>
        </el-col>

        <el-col :lg="12" :xl="12">
          <el-form-item label="指导">
            <el-select
              v-model="guidanceArr"
              multiple
              style="width: 100%"
              @change="seChange2"
            >
              <el-option
                v-for="item in guidance"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
          </el-form-item>

            <el-form-item
              label="其他(指导)"
              v-if="!(guidanceArr.indexOf(6) == -1)"
            >
              <el-input v-model="form.guidanceOther"></el-input>
            </el-form-item>
        </el-col>

      </el-row>

      <el-divider content-position="left">转诊</el-divider>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="转诊有无">
            <el-select v-model="form.ifReferral" style="width: 100%">
              <el-option
                v-for="item in neck"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="原因" v-if="[1].includes(form.ifReferral)">
            <el-input v-model="form.reason"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="转诊机构" v-if="[1].includes(form.ifReferral)">
            <el-input v-model="form.institution"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="转诊科室" v-if="[1].includes(form.ifReferral)">
            <el-input v-model="form.department"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="转诊联系人" v-if="[1].includes(form.ifReferral)">
            <el-input v-model="form.contact"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item
            label="转诊联系方式"
            v-if="[1].includes(form.ifReferral)"
          >
            <el-input v-model="form.phone"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="结果">
            <el-select v-model="form.result" style="width: 100%">
              <el-option
                v-for="item in result"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="下次随访日期" prop="nextFollowDate">
            <el-date-picker
              v-model="form.nextFollowDate"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="随访医生">
            <el-input v-model="form.followDoctor"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="随访医生签名">
            <el-upload
              class="upload-demo"
              action=""
              list-type="picture-card"
              :before-remove="beforeRemove"
              :on-change="onprogress"
              accept=".jpg,.png,"
              :multiple="false"
              :limit="1"
              :on-exceed="onExceed"
              :file-list="fileList"
              :auto-upload="false"
            >
              <em class="el-icon-plus"></em>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="家长">
            <el-input v-model="form.parent"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="家长签名">
            <el-upload
              class="upload-demo"
              action=""
              list-type="picture-card"
              :before-remove="beforeRemove1"
              :on-change="onprogress1"
              accept=".jpg,.png,"
              :multiple="false"
              :limit="1"
              :on-exceed="onExceed1"
              :file-list="fileList1"
              :auto-upload="false"
            >
              <em class="el-icon-plus"></em>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="现场图片">
            <el-upload
              class="upload-demo"
              action=""
              list-type="picture-card"
              :before-remove="beforeRemove2"
              :on-change="onprogress2"
              accept=".jpg,.png,"
              :multiple="false"
              :limit="1"
              :on-exceed="onExceed2"
              :file-list="fileList2"
              :auto-upload="false"
            >
              <em class="el-icon-plus"></em>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12"> </el-col>
      </el-row>
      <el-row type="flex" class="submitSty">
        <HButton type="add" @click="submit('formRef')">提交</HButton>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import {
  organization,
  development,
  stoop,
  hearing,
  monthAge,
  Complexion,
  skin,
  neck,
  eye,
  umbilicus,
  twoFollow,
  guidance,
  result,
  addThreeYears
} from "@/api/followForms/threeYearsEight";
import { add } from '@/api/formData'
import axios from 'axios'
import { IDValid, inputValidator, radioValidator } from '@/utils/validate'
export default {
  data() {
    return {
      formRules:{
        name: inputValidator,
        idCardNo: IDValid,
        weight:inputValidator,
        weightSe:radioValidator,
        weightLeSSS:inputValidator,
        lengthSe:radioValidator,
        length:inputValidator,
        weightLengh:inputValidator,
        followDate:inputValidator,
        nextFollowDate:inputValidator,
        hearing:inputValidator,
        hemoglobin:inputValidator
      },
      showPneumonia:false,
      showDiarrhea:false,
      showTrauma:false,
      showOther:false,
      form: {
        ifReferral: 1,
      },
      fileList: [],
      fileList1: [],
      fileList2: [],
      twoFollowArr: [],
      guidanceArr: [],
      organization:organization,
      hearing:hearing,
      stoop:stoop,
      monthAge: monthAge,
      Complexion: Complexion,
      skin: skin,
      neck: neck,
      eye: eye,
      umbilicus: umbilicus,
      twoFollow: twoFollow,
      guidance: guidance,
      result: result,
      development:development
    };
  },
  created() {},
  methods: {



    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let datas={
            followDoctor:this.form.followDoctor,
            idCard:this.form.idCard,
            bodyGridCheck:{
              abdomen:this.form.abdomen,
              chest:this.form.chest,
              hearing:this.form.hearing,
              hemoglobinValue:this.form.hemoglobin,
              other:this.form.rest,
              teething:this.form.teething,
              decayed:this.form.decayed,
              twoFollowArr:this.twoFollowArr,
            },
            developmentalAssessment:this.form.development,
            bodyMassIndex:this.form.weightLengh,
            doctorSignature:this.form.pictures,
            followupDate:this.form.followDate,
            guide:this.guidanceArr,
            healthManager:this.form.linkman,
            healthManagerPhoneNo:this.form.linkmanIphone,
            height:this.form.length,
            illnessBetweenTwoFollowups:{
              diarrheaTimes:this.form.diarrhea,
              others:this.form.twoFollowOther,
              pneumoniaTimes:this.form.pneumoniaTimes,
              traumaTimes:this.form.trauma
            },
            item:this.form.monthAge,
            kindergarten:this.form.kindergarten,
            name:this.form.userName,
            nextFollowupDate:this.form.nextFollowDate,
            parentSignature:this.form.residentName,
            parent:this.form.parent,
            physicalDevelopmentEvaluation:this.form.Complexion,
            physicalExaminationAgency:this.form.organization,
            referral:{
              contactName:this.form.contact,
              contactPhoneNo:this.form.phone,
              department:this.form.institution,
              institutional:this.form.department,
              reason:this.form.reason
            },
            weight:this.form.weight,
            sceneName:this.form.sceneName,
          }

          if(this.form.abdomenContent){
            datas.abdomenContent=this.form.abdomenContent
          }
          if(this.form.guidanceOther){
            datas.guidanceOther=this.form.guidanceOther
          }
          if(this.form.organizationConent){
            datas.organizationConent=this.form.organizationConent
          }
          if(this.form.weightSe){
            // console.log("55555555555",this.form.weightSe)
          }
          if(this.form.weightSe){
            datas.weightSe=this.form.weightSe
          }

          if(this.form.lengthSe){
            datas.lengthSe=this.form.lengthSe
          }
          if(this.form.weightLe){
            datas.weightLe=this.form.weightLe
          }

          if(this.form.chestContent){
            datas.chestContent=this.form.chestContent
          }

          if(this.form.abdomenContent){
            datas.abdomenContent=this.form.abdomenContent
          }

          addThreeYears(datas).then(res=>{
            if(res.code="AA000000"){
              this.$message.success(res.message);
            }
          })
        } else {
          return false;
        }
      });

    },


    //上传图片
    async uploadImage() {

      let formData = new FormData();
      if (this.fileList.length > 0) {
        this.fileList.map((item) => {
          formData.append("images", item.raw);
        });
        formData.append("token", this.$store.state.token);
        axios({
          method: "POST",
          url: this.uploadImgUrl,
          headers: {
            "Content-Type": "multipart/form-data",
            "token":this.$store.state.token,
          },
          withCredentials: false,
          data: formData,
        }).then((res) => {
          if (res.data.code == "AA000000") {
            this.form.pictures = res.data.data;

          }
        });
      }

      let formData1 = new FormData();
      if (this.fileList1.length > 0) {
        this.fileList1.map((item) => {
          formData1.append("images", item.raw);
        });
        formData1.append("token", this.$store.state.token);
        await axios({
          method: "POST",
          url: this.uploadImgUrl,
          headers: {
            "Content-Type": "multipart/form-data",
            token:this.$store.state.token,
          },
          withCredentials: false,
          data: formData1,
        }).then((res1) => {
          if (res1.data.code == "AA000000") {
            this.form.residentName = res1.data.data;
          }
        });
      }









      let formData2 = new FormData();
      if (this.fileList2.length > 0) {
        this.fileList2.map((item) => {
          formData2.append("images", item.raw);
        });
        formData2.append("token", this.$store.state.token);
        await axios({
          method: "POST",
          url: this.uploadImgUrl,
          headers: {
            "Content-Type": "multipart/form-data",
            token:this.$store.state.token,
          },
          withCredentials: false,
          data: formData2,
        }).then((res2) => {
          if (res1.data.code == "AA000000") {
            this.form.sceneName = res2.data.data;
          }
        });
      }









    },













    //多选封装
    select(value, options) {
      if (!(value.indexOf(1) == -1)) {
        options.forEach((e) => {
          if (e.id != 1) {
            e.isDisabled = true;
          } else {
            e.isDisabled = false;
          }
        });
      } else if (value.length == 0) {
        options.forEach((e) => {
          e.isDisabled = false;
        });
      } else {
        options.forEach((e) => {
          if (e.id == 1) {
            e.isDisabled = true;
          } else {
            e.isDisabled = false;
          }
        });
      }
    },
    //两次随访间患病情况选择
    seChange1(value) {
      console.log("value============",value)
      this.twoFollowArr = value

      this.twoFollowArr.forEach((item,index) =>{
        if(item == "肺炎"){
          this.showPneumonia=true
        }
        if(item == "腹泻"){
          this.showDiarrhea=true
        }
        if(item == "外伤"){
          this.showTrauma=true
        }
        if(item == "其他"){
          this.showOther=true
        }
        console.log("item===========",index)
      })
      console.log("45444444",this.form.twoFollow)
      // this.select(value, this.twoFollow);
    },
    //指导选择
    seChange2(value) {
      this.form.guidance = this.guidanceArr.toString();
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    onprogress(file, fileList) {
      this.fileList = fileList;
      const fileSize = file.size / 1024 < 500;
      if (!fileSize) {
        this.$message.warning("不能超过500kb！");
        this.fileList.pop();
      }

      this.uploadImage();
    },
    onExceed() {
      this.$message.error("最多上传1个！");
    },
    beforeRemove1(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    onprogress1(file, fileList) {
      this.fileList1 = fileList;
      const fileSize = file.size / 1024 < 500;
      if (!fileSize) {
        this.$message.warning("不能超过500kb！");
        this.fileList.pop();
      }
      this.uploadImage();
    },
    onExceed1() {
      this.$message.error("最多上传1个！");
    },
    beforeRemove2(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    onprogress2(file, fileList) {
      this.fileList2 = fileList;
      const fileSize = file.size / 1024 < 500;
      if (!fileSize) {
        this.$message.warning("不能超过500kb！");
        this.fileList.pop();
      }
      this.uploadImage();
    },
    onExceed2() {
      this.$message.error("最多上传1个！");
    },
  },
};
</script>

<style lang="less" scoped>
.spanSty {
  font-size: 30px;
  width: 900px;
  margin-bottom: 20px;
  margin-left: 30%;
}
.submitSty {
  float: right;
  margin-right: 45%;
}
</style>
